<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表单设计</title>
  <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="css/site.css"/>
  <style>
  *{margin:0;padding:0;}
   body{font-family:"微软雅黑";font-size:14px;position:relative;}
   ul,li{list-style:none;}
   a{text-decoration:none;}

   /*费用类别*/
   .money{width:800px;border:1px solid #ddd;}
   .money .money_type{width:100%;min-height:80px;border:1px solid #ddd;}
   .money .money_type  .money_input{width:240px;height:38px;margin:10px 30px;text-align:right;padding-right:15px;color:blue;}
   #sub_add{float:right;margin:20px 30px;text-decoration:none;}
   
   .selected{display:block;}
  </style>  
    
 </head>
 <body>

 <!-- 费用类别 -->
  <div class="money"><p>*费用类别</p>
      <div class="money_type"> 
      <input type="text" class="money_input" value="选择" readonly="readonly"/>  
	    <a id="sub_add">增加列</a>
      </div>    
      
      <input type="button" value="确定"/>
      
  </div>
  <style>
  #money_display{width:630px;height:330px;border:1px solid #ddd;position:relative;}
  #money_display h3{font-size:16px;color:red;margin-left:20px;}
  #money_display ul{margin-left:20px;}
  #money_display ul li a{text-decoration:none;color:#333;}
  #money_display ul li a:hover{cursor:pointer;}
  #money_display .submenu{padding:5px 20px;}
  #money_display .submenu_child{padding:5px 20px;}
  #money_display .submenu_child li{padding:3px 0px;}
  
  #money_display .footer{text-align:center;position:absolute;left:30%;bottom:20px;}
  #money_display .footer a{display:inline-block;width:70px;height:30px;line-height:30px;text-decoration:none;color:#fff;}
  #money_display .footer a:first-child{background:red;margin-right:5px;}
  #money_display .footer a:last-child{background:#6E6E6E;margin-left:5px;} 
  #money_display .footer a:hover{cursor:pointer;}
  </style>
  <div id="money_display" style="display:none;">
    <h3>选择财务费用类别</h3>
    <ul>
       <li>
          <a class="menuclick"><i> - </i>通用费用支出</a>
          <ul class="submenu" >
				<li><a class="items"><i> - </i>资本性支出</a>
					  <ul class="submenu_child" >
					     <li><input type="radio" name="money"> 有形资产-非生产设备、无形资产购置（按当次申购总额审批）</li>
					     <li><input type="radio" name="money"> 电脑设备购置</li>	
				    </ul>
				</li>
			</ul>
       </li>
    </ul>
    <div class="footer"><a>确定</a><a id="close">取消</a></div>
  </div>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js?2028"></script>
<script type="text/javascript">
 $(function(){
	$(".money_input").click(function(){
		var display=$("#money_display").css("display");
		if(display=="none"){
			$("#money_display").css("display","block");
		}
		/*else{
			$("#money_display").css("display","none");
		}*/
	});
	//取消关闭
	$("#close").click(function(){
		$("#money_display").css("display","none");
	});
	
	$("#money_display").find(".menuclick").click(function(){
		var display=$(this).next().css("display");
		var t = $(this).find("i").text();
		$(this).find("i").text((t=="+"?"-":"+"));
		if(display=="none"){
			$(this).next().css("display","block");
		}else{
			$(this).next().css("display","none");	
		}
		
	});
	$("#money_display").find(".items").click(function(){
		var display=$(this).next().css("display");
		var t = $(this).find("i").text();
		$(this).find("i").text((t=="+"?"-":"+"));
		if(display=="none"){
			$(this).next().css("display","block");
		}else{
			$(this).next().css("display","none");	
		}
	});
	
 });
 


</script>
</body>
</html>

